<template>
  <div class="myInfo">
    <hmNavBar title="我的资料" path="/home/my"></hmNavBar>
    <div class="content">
      <myCell title="头像" :value="userInfo.avatar" type="img"></myCell>
      <myCell class="nickname" title="昵称" :value="userInfo.nickname"></myCell>
      <myCell title="性别" :value="genderObj[userInfo.gender]"></myCell>
      <myCell title="地区" :value="area.city_list[userInfo.area]"></myCell>
      <myCell title="个人简介" :value="userInfo.intro"></myCell>
      <van-button class="exit" color="#fff" block @click="exit"
        ><span class="red">退出登录</span></van-button
      >
    </div>
  </div>
</template>
<script>
import myCell from './myCell'
import area from '@/assets/js/area.js'
import { removeLocal } from '@/utils/local.js'
import Vuex from 'vuex'
import router from '@/router'
// 引入mapState
import { mapState } from 'vuex'
export default {
  data () {
    return {
      genderObj: {
        0: '基佬',
        1: '男',
        2: '女'
      },
      area: area
    }
  },
  methods: {
    exit () {
      this.$dialog
        .confirm({
          title: '退出登录',
          message: '你确定要退出登录吗？'
        })
        .then(() => {
          // 退出成功之后  删除token值，设置isLogin 为false 跳转至login页面
          removeLocal('token')
          this.$store.commit('setIsLogin', false)
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  components: {
    myCell
  },
  mounted () {
    document.querySelector('body').style.background = '#f7f4f5'
  },
  beforeDestroy () {
    document.querySelector('body').style.backgroundColor = '#fffff'
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>
<style lang="less" scoped>
.myInfo {
  background: #f7f4f5;
  .content {
    padding: 18px @p15;
    .nickname {
      margin-top: 10px;
    }
    .exit {
      margin-top: 10px;
    }
    .red {
      color: red;
    }
  }
}
</style>
